import { ProForm } from "@ant-design/pro-components";
import Card from "../Card";
import Upload from "../../../../../components/Upload";
import { map, join } from "lodash";

import styles from "./index.module.less";

export default (props: any) => {
	const { isView } = props;
	return (
		<Card title="图文描述">
			<ProForm.Item label="商品缩略图" name="product_thumbnail" rules={[{ required: true, message: "请上传" }]}>
				<Upload
					canRemove={!isView}
					isView={isView}
					resFormat={res => join(map(res, "url"), ",")}
					maxSize={3}
					msg={"图片要求：比例为1:1，大小3m内；最多可上传1张"}
				/>
			</ProForm.Item>
			<ProForm.Item label="详情页头图" name="product_pics" rules={[{ required: true, message: "请上传" }]}>
				<Upload
					canRemove={!isView}
					isView={isView}
					canDrag={true}
					resFormat={res => map(res, "url")}
					maxSize={3}
					maxCount={10}
					msg={"图片要求：比例为1:1，大小3m内；最多可上传10张主图，拖拽可调整顺序。"}
				/>
			</ProForm.Item>
			<div className={styles.up_wrap}>
				<ProForm.Item label="详情页介绍" name="product_description" rules={[{ required: true, message: "请上传" }]}>
					<Upload
						canRemove={!isView}
						isView={isView}
						maxSize={15}
						maxCount={20}
						resFormat={res => map(res, "url")}
						canDrag={true}
						msg={"图片要求：比例为3:4，宽高建议750px*1000px，大小15m内，最多可以上传20张图片，拖拽可调整顺序；"}
					/>
				</ProForm.Item>
			</div>
		</Card>
	);
};
